
<template>
  <!-- 导航部分 -->
  <el-row class="row">
    <el-col :span="24">
      <el-link>返回</el-link>
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品列表</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
  </el-row>
  <!-- 搜索栏 -->
  <el-row class="row">
    <el-col :span="24">
      <el-form inline v-model="itemQuery" label-width="auto" >
        <el-form-item label="类别">
          <el-button @click="showChooseCatWin" >{{currentCat.catName}}</el-button>
        </el-form-item>
        <el-form-item label="商品标题">
          <el-input v-model="itemQuery.itemTitle" />
        </el-form-item>
        <el-form-item label="上架时间">
          <el-date-picker
              v-model="timeRange"
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="结束实现"
              format="YYYY-MM-DD HH:mm:ss"
              date-format="YYYY-MM-DD HH:mm:ss"
              time-format="HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-select
              v-model="itemQuery.status"
              placeholder="全部状态"
              size="large"
              style="width: 240px"
          >
            <el-option :key="0" label="全部" :value="0"/>
            <el-option :key="1" label="正常" :value="1"/>
            <el-option :key="2" label="禁用" :value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="loadItems" type="info">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>


  <!-- 工具栏 -->
  <el-row class="row">
    <el-col :span="24">
      <el-button-group class="ml-4">
        <el-button type="primary" @click="toAdd"><el-icon><Plus /></el-icon></el-button>
        <el-button type="primary" ><el-icon><EditPen /></el-icon></el-button>
        <el-button type="primary" ><el-icon><Minus /></el-icon></el-button>
      </el-button-group>
    </el-col>
  </el-row>

  <!-- 列表 -->
  <el-row class="row">
    <el-col :span="24">
      <el-table :data="items" stripe  border style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="category.catName" label="类别" width="180"/>
        <el-table-column prop="itemTitle" label="标题" width="180" />
        <el-table-column prop="itemPrice" label="价格" width="180" />
        <el-table-column prop="itemNum" label="库存" width="180" />
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column prop="status" label="状态" width="180" >
          <template #default="scope">
            <tag v-if="scope.row.status == 1" type="success">正常</tag>
            <tag v-else type="error">禁用</tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" >
          <template #default="scope">
            <el-button size="small" type="info">编辑</el-button>
            <el-button size="small" type="error">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
  <!-- 分页栏 -->
  <el-row class="row">
    <el-col :span="24">
      <el-pagination @change="changePage" background layout="prev, pager, next" :total="total" />
    </el-col>
  </el-row>
</template>
<script setup>
import {useRouter} from 'vue-router'
import itemRequest from '../../api/item.js';
import { ElMessage } from 'element-plus'
import {ref, onMounted, reactive} from 'vue';
let router = useRouter();

// 属性申明
let itemQuery = ref({});// 封装查询条件
let currentCat = ref({catName:'选择类别'});// 当前搜索栏选中的商品类型对象
let timeRange = ref('');// 搜索栏中的时间范围
// 保存我们加载的所有的内容列表
let items = ref([]);
// 分页相关属性
let total = ref(0);
let currentPage = ref(1);
let limit = ref(10);
// 函数申明
// 翻页的事件
function changePage(value){
  currentPage.value = value;
  loadItems();
}
// 分页查询数据的函数
async function loadItems(){
  // 准备请求参数
  if(currentCat && currentCat.catId){
    itemQuery.value.catId = currentCat.catId;
  }
  // 时间
  if(timeRange){
    console.log(timeRange)
    let times = timeRange.value;
    if(times){
      let createTimeStart = times[0].getFullYear() + "-" + (times[0].getMonth() + 1) + "-" + times[0].getDate()
       + " " + times[0].getHours() + ":" + times[0].getMinutes() + ":" + times[0].getSeconds();
      let createTimeEnd = times[1].getFullYear() + "-" + (times[1].getMonth() + 1) + "-" + times[1].getDate()
          + " " + times[1].getHours() + ":" + times[1].getMinutes() + ":" + times[1].getSeconds();
      itemQuery.value.createTimeStart = createTimeStart;
      itemQuery.value.createTimeEnd = createTimeEnd;
    }
  }
  itemRequest.list(currentPage.value,limit.value,itemQuery.value,res=>{
    items.value=res.data.records;
    total.value=res.total;
  })
}
/**
 * 工具栏添加按钮事件
 */
function toAdd(){
  router.push("/home/goods-add");
}


onMounted(()=>{
  loadItems();
})
</script>

<style scoped>

</style>